<template>
	<view class="servepage">
		<uni-card title="服务名字">
			<text class="uni-body">{{serveDetail.name}}</text>
		</uni-card>
		<uni-card title="服务内容">
			<text class="uni-body">{{serveDetail.description}}</text>
		</uni-card>
		<uni-card title="服务周期">
			<text class="uni-body">{{serveDetail.expire}}天有效</text>
		</uni-card>
		<uni-card title="服务合同">
			<view class="uni-body">
				<image v-for="img in serveDetail.contract" 
        class="contractimg" 
        :src="img" ></image>
			</view>
		</uni-card>
		<uni-card title="在线咨询">
			<view class="uni-body onlineConsultation">
				<view class="info">
					<view class="info-left">
						<image class="headimg" :src="manager.avatar" mode=""></image>
						<text>{{manager.name}}</text>
					</view>
					<view class="info-right">
						<uni-icons class="righticon righticon1" type="chatboxes-filled" size="30" color="#1f5dd6"></uni-icons>
						<uni-icons @click="toMessage" class="righticon" type="phone-filled" size="30" color="#1f5dd6"></uni-icons>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        serveDetail:{},
        manager:{}
				
			}
		},
		methods: {
      async getServeDetail(id) {
      const {data} =  await uni.$http.get('/service/one',{id})
      this.serveDetail = data.data
      
        
      },
     async getBroker() {
    const {data} =   await uni.$http.get('/broker/page', {pageNo:1,pageSize:50})
    let number = data.data.total
    let num = Math.floor(Math.random() * number) - 1
    this.manager = data.data.records[num]
        
      },
      toPhone() {
        uni.makePhoneCall({
          phoneNumber:this.manager.mobile
        })
      },
			
		},
    onLoad(options) {
      this.getServeDetail(options.id)
      this.getBroker()
      
    }
	}
</script>

<style lang="scss" scoped>
	.servepage{
		.contractimg{
			width: 160rpx;
			height: 160rpx;
			margin-right: 15rpx;
		}
		.onlineConsultation{
			display: flex;
			justify-content: center;
			align-items: center;
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10rpx;
				width: 100%;
				height: 140rpx;
				border: 1px solid #efefef;
				.info-left{
					display: flex;
					align-items: center;
					.headimg{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
				.info-right{
					display: flex;
					align-items: center;
					.righticon{
						background-color: #2bbbef;
						border-radius: 50%;
						padding: 20rpx;
						text-align: center;
						line-height: 48rpx;
					}
					.righticon1{
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>
